<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02.盒子模型</title>
    <style>
        /*
           1. 任意一个元素都是盒子
           2. 盒子模型的组成
            从内到外
              content 内容区
                width  宽度
                height 高度
              padding 内容到边框 内边距
                padding-left/right/top/bottom
                padding number
                   n1  四个内边距都是n1
                   n1 n2  n1 上下  n2 左右 
                   n1 n2 n3  b1 上 n2 左右  n3 下 
                   n1 n2 n3 n4  上右下左右
              border  边框
                方向
                  left/right/top/bottom
                三要素
                  width 厚度 默认 3px
                  style 类型 必须设置的
                    solid 实现
                    dashed 虚线
                    dotted 点
                    double 双实线
                  color 颜色 默认 黑色
             书写规范 
               复杂点的写法 
                 border-方向-三要素:对应的值
               简单写法
               border-方向: 三要素

              margin  外边距
               margin 和 padding 一样的 
               
        */
        span {
            width: 500px;
            height: 300px;
            /* 背景颜色 */
            background-color: red;
            /* 设置padding值 */
            padding-left: 10px;
            padding-right: 30px;
            /* 没有上下的内边距 */
            /* padding-top: 10px;
            padding-bottom: 30px; */
        }

        div {
            /* width: 500px;
            height: 300px; */
            /* 背景颜色 */
            background-color: yellow;
            /* 设置padding值 */
            /* padding-left: 10px;
            padding-right: 30px;
            padding-top: 10px;
            padding-bottom: 30px; */
            padding: 10px;
            padding: 10px 20px;
            padding: 10px 20px 30px;
            padding: 10px 20px 30px 40px;
            /* 边框设置 */
            /* 设置上边框 */
            /* 复杂的写法 */
            /* border-top-style: solid;
            border-top-color: green;
            border-top-width: 30px; */
            /* 简单的写法 */
            border-top: 30px solid green ;
            border-bottom: 30px dashed green ;
            border-left: 30px dotted green ;
            border-right: 30px double green ;
            /* 如果边框的上下左右都一样 不添加方位词 表示四面的边框 */
            /* border-width: 50px ;
            border-color: pink;
            border-style: solid; */
            /* 简写 */
            border: 50px pink solid;
        }

        input {
            /* border-width:  20px;; */
            /* 去除边框 */
            border:none; 
            /* 去掉轮廓 */
            outline: none;
        }

        input:active {
            border: 50px pink solid;
        }
    </style>
</head>
<body>
    <input type="text">
    <hr>
    <span>我是行级</span>
     <hr>
    <div>我是块级</div>

    
    
</body>
</html>